<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName('/module-manage/town-task-handle')"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                    >{{ item.meta.title }}
                    </ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                            item.meta.title
                        }}
                    </ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="list-container">
            <div class="left">
                <div class="title">
                    <span>已下发的任务</span>
                    <div class="icon" @click="toMore('3')">
                        <img class="success" src="~@/assets/list-more.png" alt=""/>
                        <span>更多</span>
                    </div>
                </div>
                <div class="scroll-box">
                    <div class="number">
                        <div class="item" @click="toMore('3')">
                            <div class="img">
                                <img class="success" src="~@/assets/zongshu.png" alt=""/>
                                <span style="color: #DE2728;">{{ count.total || 0 }}</span>
                            </div>
                            <p>总数</p>
                        </div>
                        <div class="item" @click="toMore('3', '1')">
                            <div class="img">
                                <img class="success" src="~@/assets/jinxingzhong.png" alt=""/>
                                <span style="color: #FB822F;">{{ count.unfinished || 0 }}</span>
                            </div>
                            <p>进行中</p>
                        </div>
                        <div class="item" @click="toMore('3', '2')">
                            <div class="img">
                                <img class="success" src="~@/assets/yiwancheng.png" alt=""/>
                                <span style="color: #2C82C9;">{{ count.finished || 0 }}</span>
                            </div>
                            <p>已完成</p>
                        </div>
                    </div>
                    <div class="list">
                        <div class="list-item" v-for="item in leftData" :key="item.id">
                            <div class="title">
                                <div>
                                    <span class="status">进行中</span>
                                    <p class="form-name">{{ item.formName }}</p>
                                </div>
                            </div>
                            <div class="list-content">
                                <div class="item" @click="toChildList(item)">
                                    <p class="number">{{ item.childTaskCount || 0 }}</p>
                                    <div>子任务</div>
                                </div>
                                <div class="item">
                                    <p class="number" @click="toDataList(item)">{{ item.realityFillCount || 0 }}</p>
                                    <div>已采集</div>
                                </div>
                            </div>
                            <div class="bottom">
                                <p class="time">{{ item.startDate }}</p>
                                <div class="btn" @click="deleteLeftTask(item)">删除</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="title">
                    <span>待审核的任务</span>
                    <div class="icon" @click="toMore('1')">
                        <img class="success" src="~@/assets/list-more.png" alt=""/>
                        <span>更多</span>
                    </div>
                </div>
                <div class="scroll-box">
                    <div class="number">
                        <div class="item" @click="toMore('1')">
                            <div class="img">
                                <img class="success" src="~@/assets/daishenpi.png" alt=""/>
                                <span style="color: #58B7A4;">{{ centerTotal || 0 }}</span>
                            </div>
                            <p>批量任务待审批</p>
                        </div>
                    </div>
                    <div class="list">
                        <div class="list-item" v-for="item in centerData" :key="item.id" @click="detailRow(item)">
                            <div class="title">
                                <div>
                                    <span class="status">批量采集</span>
                                    <p class="form-name">{{ item.formName }}</p>
                                </div>
                                <p class="now">上一环节：{{ item.parentDepartmentName }}{{ item.parentAssignee }}</p>
                            </div>
                            <div class="list-content">
                                <div class="item">
                                    <p class="number">{{ item.dataAllCount || 0 }}</p>
                                    <div>已采集</div>
                                </div>
                            </div>
                            <div class="bottom">
                                <p class="time">上报时间：{{ item.nodeCreateDate }}</p>
                                <div class="btn" style="background: #FB822F;">审批</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <span>待填报的任务</span>
                    <div class="icon" @click="toMore('2')">
                        <img class="success" src="~@/assets/list-more.png" alt=""/>
                        <span>更多</span>
                    </div>
                </div>
                <div class="scroll-box">
                    <div class="number">
                        <div class="item" @click="toMore('2')">
                            <div class="img">
                                <img class="success" src="~@/assets/daitianbao.png" alt=""/>
                                <span style="color: #EF9262;">{{ rightTotal || 0 }}</span>
                            </div>
                            <p>待填报</p>
                        </div>
                    </div>
                    <div class="right-list">
                        <div class="list-item" v-for="item in rightData" :key="item.id">
                            <div class="title">
                                <div class="title-left">
                                    <span class="status">已采集数据{{ item.dataCount }}</span>
                                    <p class="form-name" @click="toDetail(item)">{{ item.formName }}</p>
                                </div>
                                <template
                                    v-if="new Date(item.endDate).getTime() - new Date().getTime() > 24 * 60 * 60 * 1000">
                                    <div class="right-tap dai">
                                        <span>待</span>
                                        <p>待填报</p>
                                    </div>
                                </template>
                                <template v-else-if="new Date(item.endDate).getTime() - new Date().getTime() <= 0">
                                    <div class="right-tap yu">
                                        <span>逾</span>
                                        <p>逾期{{
                                                Math.ceil(Math.abs((new Date(item.endDate).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)))
                                            }}天</p>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="right-tap ji">
                                        <span>即</span>
                                        <p>即将到期</p>
                                    </div>
                                </template>
                            </div>
                            <div class="list-content">
                                <p>下发人：{{ item.creatorDepartmentName }}{{ item.creator }}</p>
                                <p>下发时间：{{ item.nodeCreateDate }}</p>
                            </div>
                            <div class="bottom">
                                <div class="btn" style="background: #74C4CD;" @click="fillInRow(item)">填报</div>
                                <el-popover
                                    placement="bottom"
                                    width="260"
                                    trigger="click">
                                    <div class="step-import">
                                        <div class="step1">
                                            <el-link type="primary" @click="downTemplate(item)">下载模板</el-link>
                                            <div>请先下载模板，根据模板填写后导入。<br>部分复杂表格格式暂不支持导入，请完成导入后进入详情页面手动添加。</div>
                                        </div>
                                        <upLoad-normal
                                            :accept="'.xlsx'"
                                            :isSingle="true"
                                            @httpRequest="httpRequest">
                                            <el-link type="primary" @click="importRow(item)">导入excel</el-link>
                                        </upLoad-normal>
                                    </div>
                                    <div slot="reference" class="btn" style="background: #32A78F;">导入</div>
                                </el-popover>
                                <div class="btn" style="background: #2C82C9;" @click="submitRow(item)">提交</div>
                                <div class="btn" style="background: #6B7EF7;" @click="assignRow(item)">指派</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import UpLoadNormal from "@/components/upload-normal/index.vue";
import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";
import DownLoadTemplateUpLoadMixins from "@/views/module-manage/src/collection-task/village/mixins";
import { State } from "vuex-class";
import { localStorage } from "@/utils";

@Component({
    name: 'TaskHandleListNotAlive',
    components: {
        UpLoadNormal
    }
})
export default class TaskHandleList extends Mixins(DownLoadTemplateUpLoadMixins) {
    @State(state => state.user.userInfo) user: any;
    // 下发的任务
    leftData: any[] = []
    // 待审核的任务
    centerData: any[] = []
    // 待填报的任务
    rightData: any[] = []
    count = {
        finished: 0,
        total: 0,
        unfinished: 0
    };

    centerTotal = 0
    rightTotal = 0

    created() {
        this.getNumber();
        this.getLeft();
        this.getCenter();
        this.getRight();
    }


    // 获取数据统计
    async getNumber() {
        const res = await this.$server["task/all/getCount"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.count = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 下发的任务
    async getLeft() {
        const res = await this.$server["task/all/getTable"]({
            data: {
                formName: '',
                pageSize: 10,
                currentPage: 1,
                status: 1
            }
        });
        if (res.data.code === 200) {
            this.leftData = res.data.data.records;
        } else {
            this.leftData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 待审核的任务
    async getCenter() {
        const res = await this.$server["task/getTable"]({
            data: {
                status: 1,
                category: "approval",
                taskKind: 2,
                pageSize: 10,
                currentPage: 1
            }
        });
        if (res.data.code === 200) {
            this.centerData = res.data.data.records;
            this.centerTotal = res.data.data.total;
        } else {
            this.centerData = [];
            this.centerTotal = 0;
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 待填报的任务
    async getRight() {
        const res = await this.$server["task/getTable"]({
            data: {
                status: 1,
                category: "handle",
                taskKind: 2,
                pageSize: 10,
                currentPage: 1
            }
        });
        if (res.data.code === 200) {
            this.rightData = res.data.data.records;
            this.rightTotal = res.data.data.total;
        } else {
            this.rightData = [];
            this.rightTotal = 0;
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    deleteLeftTask(row: any) {
        this.$confirm(
            "请确认是否需要删除，删除后将同步删除子任务和已采集的相关数据。",
            "删除本任务",
            {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }
        )
            .then(async() => {
                const res = await this.$server["task/totalTask/delete"]({
                    data: {
                        id: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.getNumber();
                    this.getLeft();
                }
            })
            .catch();
    }

    detailRow(row: any) {
        this.$router.push({
            name: "TownCreatedAndReceivedDetailList",
            query: {
                name: row.name,
                formId: row.formId,
                processId: row.processId,
                status: row.status,
                taskId: row.id,
                processInstanceId: row.processInstanceId,
                reason: row.reason,
                approvalStatus: row.approvalStatus
            }
        });
    }

    // 填报
    fillInRow(row: any) {
        this.$router.push({
            name: "TownDeclareFillIn",
            query: {
                rowId: row.id,
                id: row.formId,
                processInstanceId: row.processInstanceId,
                name: row.name,
                description: row.description,
                descriptionType: row.descriptionType
            }
        });
    }

    // 提交
    submitRow(row: any) {
        this.$confirm("是否确认提交任务", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["task/complete"]({
                    data: {
                        taskId: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("操作成功");
                    this.getRight();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch();
    }

    // 指派
    assignRow(row: any) {
        dialogSelect({
            isSingle: true,
            tabs: [
                {
                    label: "镇成员",
                    name: "town"
                }
            ],
            sure: async(vm: any, model: any) => {
                vm.close();
                if (model.selectedList.length) {
                    const res = await this.$server["collection/turnTask"]({
                        data: {
                            taskId: row.id,
                            userId: model.selectedList[0]
                        }
                    });
                    if (res.data.code === 200) {
                        this.getRight();
                        this.$message.success("操作成功");
                    } else {
                        this.$message.error(res.data.message || "接口请求错误!");
                    }
                }
            },
            getOptions: (vm: any) => this.getOptions(vm)
        });
    }

    // 获取选项
    async getOptions(vm: any) {
        const getTown = async() => {
            const res = await this.$server["org/getMember"]({
                data: {
                    departmentId: "",
                    pageSize: 999,
                    currentPage: 1
                },
                loader: false
            });
            if (res.data.code === 200) {
                const arrObj: any = {};
                res.data.data.records.filter((item: any) => item.id !== this.user.id).forEach((item: any) => {
                    if (item.id === this.user.id) {
                        item.disabled = true;
                    }
                    if (arrObj[item.departmentId]) {
                        arrObj[item.departmentId].push({
                            ...item,
                            governmentName: item.departmentName
                        });
                    } else {
                        arrObj[item.departmentId] = [
                            {
                                ...item,
                                governmentName: item.departmentName
                            }
                        ];
                    }
                });
                vm.getOptions(Object.values(arrObj) || []);
            } else {
                vm.getOptions([]);
            }
        };
        await getTown();
    }

    // 导入
    importRow(row: any) {
        this.currentForm = row;
    }

    toMore(tabs: any, status?: any) {
        this.$router.push({ path: '/module-manage/town-received', query: { tabs, status } });
    }

    // 查看子任务
    toChildList(row: any) {
        this.$router.push({
            name: "TownCreatedList",
            query: {
                name: row.formName,
                id: row.id,
                formId: row.formId,
                status: row.fillStatus
            }
        });
    }

    // 查看数据已采集
    toDataList(row: any) {
        localStorage.setItem("childTask", row.childTask);
        this.$router.push({
            name: "TownCreatedAndReceivedDetailAllList",
            query: {
                name: row.formName,
                formId: row.formId,
                status: row.fillStatus
            }
        });
    }

    // 查看
    toDetail(row: any) {
        this.$router.push({
            name: "TownTableDetail",
            query: {
                id: row.id,
                formId: row.formId,
                assigneeId: row.assigneeId,
                name: row.name,
                status: row.status,
                description: row.description,
                processInstanceId: row.processInstanceId,
                reason: row.reason,
                descriptionType: row.descriptionType
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
    }
}

.list-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    overflow-y: auto;

    .left, .center, .right {
        width: calc(33.3% - 14px);
        background: #fff;
        min-height: 100%;

        & > .title {
            border-bottom: 1px solid #EDEFF2;
            height: 62px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & > span {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                line-height: 22px;
                color: #37383A;
                margin-left: 20px;
            }

            .icon {
                display: flex;
                align-items: center;
                margin-right: 20px;
                cursor: pointer;

                img {
                    display: block;
                    width: 20px;
                    height: 20px;
                }

                span {
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    line-height: 20px;
                    color: #666666;
                }
            }
        }

        .scroll-box {
            height: calc(100% - 63px);
            overflow-y: auto;

            & > .number {
                margin: 20px;
                width: calc(100% - 40px);
                background: #FFFFFF;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
                border-radius: 12px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: 93px;

                .item {
                    margin-top: 13px;
                    cursor: pointer;

                    &:hover {
                        p {
                            color: #DE2728;
                        }
                    }

                    .img {
                        width: 43px;
                        height: 43px;
                        margin: 0 auto;
                        position: relative;

                        img {
                            display: block;
                            width: 43px;
                            height: 43px;
                        }

                        span {
                            font-size: 24px;
                            font-family: DIN;
                            font-weight: bold;
                            line-height: 29px;
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }

                    p {
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 20px;
                        color: #666666;
                        margin: 6px 0 0 0;
                        text-align: center;
                    }
                }
            }
        }


        .list {
            margin: 0 20px;
            width: calc(100% - 40px);

            .list-item {
                width: 100%;
                height: 169px;
                background: #FFFFFF;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
                border-radius: 12px;
                margin-bottom: 10px;
                box-sizing: border-box;
                padding: 20px 30px 0;

                &:hover {
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                }

                .title {
                    margin-bottom: 3px;
                    height: 22px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    div {
                        display: flex;
                        align-items: center;

                        .status {
                            height: 16px;
                            background: rgba(50, 167, 143, 0.1);
                            border-radius: 2px;
                            padding: 0 5px;
                            font-size: 10px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            line-height: 16px;
                            color: #32A78F;
                            margin-right: 2px;
                        }

                        .form-name {
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            line-height: 22px;
                            color: #333333;
                            margin: 0;
                        }
                    }

                    .now {
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 17px;
                        color: #666666;
                    }
                }

                .list-content {
                    display: flex;
                    align-items: center;
                    padding-bottom: 20px;
                    border-bottom: 1px dashed #EBEBEB;

                    .item {
                        margin-right: 107px;
                        cursor: pointer;

                        &:last-child {
                            margin-right: 0;
                        }

                        .number {
                            font-size: 24px;
                            font-family: DIN;
                            font-weight: bold;
                            line-height: 29px;
                            color: #37383A;
                            margin: 0;
                            text-align: center;
                        }

                        div {
                            height: 20px;
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            line-height: 20px;
                            color: #666666;
                            margin: 4px 0 0 0;
                            text-align: center;
                        }

                        &:hover {
                            .number {
                                color: #DE2728;
                            }
                        }
                    }
                }

                .bottom {
                    height: 50px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .time {
                        height: 17px;
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 17px;
                        color: #666666;
                        margin: 0;
                    }

                    .btn {
                        background: #DE2728;
                        width: 77px;
                        height: 32px;
                        font-size: 15px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 32px;
                        color: #FFFFFF;
                        border-radius: 4px;
                        text-align: center;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .center {
        .status {
            color: #FB822F !important;
            background: rgba(251, 130, 47, 0.1) !important;
        }
    }

    .right {
        .right-list {
            margin: 0 20px;
            width: calc(100% - 40px);

            .list-item {
                width: 100%;
                height: 157px;
                background: #FFFFFF;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
                border-radius: 12px;
                margin-bottom: 10px;
                box-sizing: border-box;
                padding: 20px 30px 0;
                position: relative;

                &:hover {
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                }

                .title {
                    margin-bottom: 27px;
                    height: 22px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .title-left {
                        display: flex;
                        align-items: center;

                        .status {
                            height: 16px;
                            border-radius: 2px;
                            padding: 0 5px;
                            font-size: 10px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            line-height: 16px;
                            margin-right: 2px;
                            color: #2C82C9;
                            background: rgba(44, 130, 201, 0.1);
                        }

                        .form-name {
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            line-height: 22px;
                            color: #333333;
                            margin: 0;
                            cursor: pointer;
                            &:hover {
                                color: #DE2728;
                            }
                        }
                    }

                    .right-tap {
                        position: absolute;
                        right: 0;
                        top: 20px;
                        padding-left: 4px;
                        height: 26px;
                        background: #EF9262;
                        opacity: 1;
                        border-radius: 100px 0px 0px 100px;
                        display: flex;
                        align-items: center;

                        span {
                            display: block;
                            width: 18px;
                            height: 18px;
                            background: #fff;
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            line-height: 18px;
                            color: #EF9262;
                            text-align: center;
                            border-radius: 50%;
                        }

                        p {
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            line-height: 20px;
                            color: #FFFFFF;
                            opacity: 1;
                            margin: 0;
                        }

                        &.dai {
                            background: #A6945B;

                            span {
                                color: #A6945B;
                            }
                        }

                        &.yu {
                            background: #EF9262;

                            span {
                                color: #EF9262;
                            }
                        }

                        &.ji {
                            background: #999999;

                            span {
                                color: #999999;
                            }
                        }
                    }
                }

                .list-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 20px;
                    border-bottom: 1px dashed #EBEBEB;

                    p {
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 17px;
                        color: #666666;
                        margin: 0;
                    }
                }

                .bottom {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    height: 50px;

                    .btn {
                        margin-left: 10px;
                        width: 77px;
                        height: 32px;
                        font-size: 15px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 32px;
                        color: #FFFFFF;
                        text-align: center;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
